<template>
  <div class="pvc-page">
    <h4 class="zl-title f-mt0">存储卷列表
      <div class="fr">
        <search placeholder="请输入存储卷名称" @change="searchPvc"></search>
        <Button type="primary" @click="pvcAddModify()" v-if="hasPermission($store, $route.params.environmentId, 'PVC_POST_ENV')">
          <Icon type="md-add" /> 添加存储卷
        </Button>
      </div>
    </h4>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <Table v-else :columns="columns" :data="pvcList" class="pvc-table"></Table>

    <!-- 新增、修改 -->
    <add-modify-model :visible.sync="pvcVisible" :form="pvcForm" @finish="init" ></add-modify-model>
    <!-- 详情 -->
    <detail-model :visible.sync="detailVisible" :form="pvcForm"></detail-model>
  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import AddModifyModel from '@/components/pvc/add-modify-model'
import DetailModel from '@/components/pvc/detail-model'
import { parseTime } from '@/utils'
import Search from '@/components/search'

export default {
  components: { AddModifyModel, DetailModel, Search },
  data() {
    return {
      columns: [{
        type: 'index',
        width: 60
      }, {
        title: '名称',
        key: 'id'
      }, {
        title: '访问模式',
        width: 130,
        key: 'accessModes'
      }, {
        title: '存储卷',
        key: 'volumeName',
        width: 340
      }, {
        title: '状态',
        width: 70,
        render: (h, params) => {
          return h('span', params.row.phaseStatus === 'Bound' ? '绑定' : '未绑定')
        }
      }, {
        title: '创建时间',
        key: 'creationTimestamp',
        render: (h, params) => {
          return h('span', parseTime(params.row.creationTimestamp))
        }
      }, {
        title: '操作',
        render: (h, params) => {
          let btnList = [h('div', {
            class: 'button-inner',
            on: {
              click: () => {
                this.pvcDetail(params.row)
              }
            }
          }, [
            h('Icon', {
              props: {
                type: 'ios-paper'
              }
            }, ''),
            '详情'
          ])]
          if (this.hasPermission(this.$store, this.$route.params.environmentId, 'INGRESS_PUT_ENV|INGRESS')) {
            btnList.push(h('div', {
              class: 'button-inner',
              on: {
                click: () => {
                  this.pvcDelete(params.row)
                }
              }
            }, [
              h('Icon', {
                props: {
                  type: 'md-trash'
                }
              }, ''),
              '删除'
            ]))
          }
          return h('div', btnList)
        }
      }],
      pvcList: [],
      pvcListOrigin: [],
      pvcForm: {},
      pvcVisible: false,
      detailVisible: false,
      isLoading: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 根据名称搜索
    searchPvc(name) {
      let temp = []
      if (name) {
        this.pvcListOrigin.forEach((pvc) => {
          if (pvc.id.indexOf(name) !== -1) {
            temp.push(pvc)
          }
        })
      } else {
        temp = this.pvcListOrigin
      }
      this.pvcList = temp
    },
    // 删除存储卷
    pvcDelete(pvc) {
      this.$Modal.confirm({
        title: '系统提示',
        content: '确定删除存储卷（' + pvc.id + '）?',
        loading: true,
        onOk: () => {
          Fetch.delete({
            url: '/api/environments/' + this.$route.params.environmentId + '/persistentvolumeclaims/' + pvc.id,
            done: () => {
              this.$Modal.remove()
            }
          }).then((res) => {
            this.$Message.success({
              content: '删除存储卷（' + pvc.id + '）成功！',
              duration: this.DURATION
            })
            this.init()
          })
        }
      })
    },
    // 存储卷详情
    pvcDetail(pvc) {
      console.log(pvc)
      this.pvcForm = Object.assign({}, pvc)
      this.detailVisible = true
    },
    // 存储卷新增、修改
    pvcAddModify(pvc) {
      if (pvc) {
        this.pvcForm = Object.assign({environmentName: pvc.environmentId}, pvc)
      } else {
        this.pvcForm = {
          environmentName: '',
          id: ''
        }
      }
      this.pvcVisible = true
    },
    // 获取存储卷初始数据
    init() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/persistentvolumeclaims',
        done: () => {
          this.isLoading = false
        }
      }).then((res) => {
        let temp = []
        // 过滤正在删除的存储卷
        res.data.forEach(pvc => {
          if (pvc.phaseStatus !== 'Terminating') {
            temp.push(pvc)
          }
        })
        this.pvcList = temp
        this.pvcListOrigin = temp
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pvc-page {
  .pvc-table {
    margin-top: 20px;
  }
  .zl-title {
    margin-top: 10px;
  }
}
</style>
